<template>
  <div class="test-page">
    <div class="text-green-500">{{ test }}</div>

    <n-button type="primary" class="my-4">出现绿色按钮代表naiveUi引入成功</n-button>

    <div class="my-4 text-default">{{ num }}</div>

    <n-button type="error" @click="changeTest">点击数字切换代表pinia使用成功,页面刷新未归零证明插件正常使用</n-button>
  </div>
</template>

<script setup lang="ts">
import { useTestStore } from '@/store/modules/test'

const store = useTestStore()
const { changeTest } = store
const { test: num } = storeToRefs(store)

const test = ref('出现绿色文字代表tailwindcss引入成功')
</script>

<style lang="less" scoped>
.test-page {
  @apply bg-blue-100 p-4;
}
</style>
